<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>10_DOM事件监听</title>
</head>
<body>
<button onclick="alert('最近降温，注意保暖')">弹出框警告</button>
    <button id="btn">我是按钮</button>
<h4>震惊：居然发生了这种事...</h4>
<div>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est id laudantium natus provident repellat tempore!
        Consequatur, fugiat, mollitia. Architecto cumque debitis ducimus eligendi esse nobis qui quidem quos recusandae
        reiciendis.
    </div>
    <div>Accusamus dolores eum exercitationem illum, ipsa iste iure necessitatibus nemo nisi pariatur quasi quia
        repellat, sapiente sed tempore vitae voluptate! Accusamus atque dolore dolorum enim error ipsam odio possimus,
        voluptate!
    </div>
    <div>A aut blanditiis, culpa deleniti dolorem ex laboriosam laudantium modi molestiae quasi reiciendis repellendus
        sit tenetur vitae voluptate. Eius facere, impedit ipsa nesciunt nostrum porro vero voluptatem. Similique, sit,
        veritatis.
    </div>
    <div>Adipisci assumenda ex harum laudantium molestias nam omnis repellendus voluptatem. Modi mollitia natus non
        placeat voluptatem! Commodi consectetur, dolore eius facere id illum ipsa magni molestias, nemo quia sit ut.
    </div>
    <div>Corporis deserunt enim esse et hic incidunt, itaque laborum quidem saepe unde voluptates voluptatibus. Beatae,
        esse, eum fugiat illum nam odio pariatur qui reiciendis repellat rerum sequi sit voluptate voluptatem?
    </div>
    <div>Aliquid asperiores culpa, dolor earum eligendi eveniet fugit impedit iure laborum libero, nihil quam quibusdam
        quis rem sed soluta suscipit! Asperiores aut commodi debitis in modi officiis, quia quisquam voluptates?
    </div>
    <div>Ab alias aliquid at atque blanditiis culpa deleniti dolorem eius eveniet in ipsam, ipsum maxime molestiae nulla
        odit provident quam qui quidem rem reprehenderit ut voluptas voluptatem. Ex, expedita, voluptatum.
    </div>
    <div>Aperiam cumque doloremque ducimus fuga illum, in ipsum libero modi mollitia quia quis quisquam, rem, sequi sint
        sit tenetur vel? Debitis dignissimos ea ex minus nemo qui repudiandae unde voluptatem?
    </div>
    <div>Consectetur deleniti dolor doloremque esse eveniet expedita libero nulla, porro quisquam repudiandae temporibus
        totam veritatis. Assumenda consequuntur labore nobis praesentium quidem sed tempore voluptates! Impedit ipsum
        minima nemo officia ratione?
    </div>
    <div>Ab amet doloremque ducimus explicabo ipsam itaque iure minus, non optio sunt? Ab asperiores atque doloribus
        earum explicabo impedit, iusto maiores maxime modi molestiae mollitia, quam soluta vitae. Aspernatur, ipsa!
    </div>
    <div>Accusantium alias architecto corporis dicta dolorum ducimus impedit magni, minima nihil nisi numquam pariatur
        placeat quia reiciendis rerum sunt voluptatum! Aperiam asperiores ipsam iste itaque neque nobis sed vel
        veritatis.
    </div>
    <div>Nesciunt officiis quasi repudiandae rerum sunt! Facilis itaque necessitatibus numquam suscipit? Ab aspernatur
        blanditiis corporis dicta doloremque harum, molestiae molestias omnis perferendis provident quasi quos rerum sed
        soluta vel voluptates.
    </div>
    <div>Adipisci debitis eos eveniet, excepturi expedita facere hic id impedit ipsam laborum laudantium molestias
        mollitia neque numquam perspiciatis ratione rerum saepe sequi tenetur unde vel velit veniam voluptas? Modi,
        nihil.
    </div>
    <div>A aut consequuntur dolore exercitationem facilis fuga labore maxime quae, quam veniam! Aut consequatur expedita
        illo magni maiores pariatur sunt, vel voluptate. Ad doloremque illum nemo quibusdam quidem totam voluptas.
    </div>
    <div>Culpa dolore expedita illo, obcaecati odio similique tempora voluptatem? Adipisci alias, consectetur culpa
        dignissimos, dolor, doloremque eaque excepturi inventore modi molestiae nemo nulla praesentium quae recusandae
        tempora tenetur velit voluptates!
    </div>
    <div>Dicta dignissimos odit, pariatur placeat possimus recusandae tenetur! Accusantium, adipisci alias aut autem
        consectetur consequuntur, delectus deserunt dicta dignissimos facilis illo in ipsa magnam perspiciatis quas
        rerum saepe sed vel.
    </div>
    <div>Accusantium aliquam distinctio esse nobis, recusandae vitae. Dolorem, temporibus, voluptates? Aliquam eveniet
        exercitationem iure minima non quae ratione reprehenderit sequi! Eos laudantium magnam maiores minus nisi
        perspiciatis praesentium quasi sed?
    </div>
    <div>Atque, eos eum fugiat itaque minus nobis quaerat repudiandae voluptatem. Atque beatae culpa deleniti distinctio
        est laboriosam, odit quis reiciendis veritatis. Eum impedit molestias placeat possimus quia rerum sunt tempore!
    </div>
    <div>Animi aspernatur aut consectetur consequatur cupiditate delectus deserunt distinctio dolorem earum, eum
        impedit, ipsam magni mollitia nesciunt nobis officiis, optio provident quidem ratione repellat repellendus saepe
        sed tempora veritatis vitae?
    </div>
    <div>Facilis iste libero rem sed velit. Eum explicabo facilis fuga quis sed vero voluptas voluptates? Corporis
        deleniti deserunt dolorum eos eveniet ipsam modi, natus neque quae quibusdam rem repellendus voluptatum!
    </div>
    <div>Distinctio excepturi laboriosam quaerat quo reiciendis repellat vel? Ad aliquam, aliquid aperiam dolores eaque
        explicabo illum, ipsam modi molestiae molestias mollitia nisi non nostrum nulla praesentium qui quos ratione
        temporibus!
    </div>
    <div>Ad architecto at beatae culpa eaque exercitationem fuga hic, ipsa ipsam laudantium nesciunt nihil nobis
        pariatur quidem quis recusandae reiciendis! Adipisci atque cum impedit neque obcaecati officiis optio quod
        veritatis.
    </div>
    <div>Ad asperiores assumenda autem consectetur cupiditate deserunt dolorem ex fuga inventore minus mollitia nisi
        nostrum numquam optio pariatur placeat porro possimus quasi quidem ratione, sequi sit sunt veniam, vero
        voluptas!
    </div>
    <div>Dolores error eveniet fugiat odit quisquam repellendus, repudiandae veritatis! A ad alias eligendi enim est
        fugit hic illum impedit labore magnam modi officia, quas quia ratione reprehenderit, sed tempore vitae!
    </div>
    <div>Consequatur, magnam neque. Adipisci aperiam assumenda blanditiis corporis cupiditate, et magnam molestiae nam,
        neque obcaecati perspiciatis qui vero. Alias amet dicta dolor est excepturi possimus rerum velit veritatis vitae
        voluptatem.
    </div>
    <div>Accusamus asperiores corporis culpa cumque deserunt dolorem dolorum eaque earum est exercitationem id in nam
        necessitatibus non officiis omnis possimus quas qui, quisquam quo quod repellat sit sunt tenetur vitae.
    </div>
    <div>Accusamus accusantium ad aut commodi consectetur, consequuntur culpa deserunt distinctio dolores eligendi
        eveniet excepturi facere fugiat illo illum in, iure minus nemo odit quae quam quisquam repellat sed temporibus,
        voluptate!
    </div>
    <div>A ad aliquam aut autem dolor perferendis ratione vitae voluptatibus voluptatum. Architecto, aut corporis culpa
        dolorem doloremque earum excepturi nemo nostrum obcaecati officiis perspiciatis quo quod reprehenderit sequi
        sunt tenetur.
    </div>
    <div>Aspernatur atque consequuntur eveniet, fugiat labore nam nemo nobis nulla omnis, possimus quam quis quos
        repellat rerum sapiente ullam veniam voluptas. Aut beatae dicta dolore eius ex nam natus perferendis.
    </div>
    <div>Assumenda beatae delectus doloribus eius minus possimus quis. Asperiores facilis fugit itaque, iure laudantium
        magnam maxime natus nulla placeat possimus, reiciendis reprehenderit sequi, temporibus vitae voluptatibus.
        Corporis explicabo numquam rerum?
    </div>
    <div>Hic mollitia nesciunt voluptatem! Enim, facere facilis impedit ipsum minima molestias numquam quae quidem
        quisquam quos soluta tempora, ullam velit? Ab accusantium aut eius itaque labore, natus officiis perspiciatis
        vero.
    </div>
    <div>Accusantium ad assumenda aut dolorem harum laborum neque quasi sed sequi veniam? Ab, asperiores dignissimos
        doloribus eos facere rem rerum vel velit veritatis. Fuga necessitatibus officia praesentium ullam velit,
        voluptatibus!
    </div>
    <div>Cupiditate dolore est incidunt inventore, ipsum officia perspiciatis quas repellendus sapiente sed! A
        architecto cum expedita harum id, ipsa qui quia repudiandae tempora velit. Accusantium dolore eaque nulla
        perspiciatis sapiente.
    </div>
    <div>Accusamus adipisci consequatur cum deserunt dignissimos doloribus esse exercitationem fuga illum ipsam magni,
        nihil non officia placeat quas quasi qui quos recusandae saepe, velit! Ipsum itaque quibusdam sequi voluptatem.
        Itaque.
    </div>
    <div>Laboriosam non nulla omnis perspiciatis! Alias aliquid corporis enim facere molestias nemo nihil pariatur
        quidem, quo ratione, rem voluptatum! Adipisci at consequuntur cum, dolores perspiciatis praesentium provident
        quis ullam unde.
    </div>
    <div>Amet consequuntur, doloremque dolorum explicabo facere facilis iusto libero nulla, odio perspiciatis quae
        soluta, ullam. Aliquid asperiores corporis eaque incidunt ipsa. Aut autem eos fuga, nobis porro sapiente sint
        veniam.
    </div>
    <div>Accusamus, accusantium fugiat laboriosam laborum maxime recusandae sapiente. Ab ad asperiores deserunt fuga
        libero officia perferendis quae sequi tempore? Adipisci dolore ducimus ipsum nulla numquam quae repellendus
        saepe sed temporibus?
    </div>
    <div>Ad cum debitis, eaque exercitationem iste itaque iure libero minus natus necessitatibus, nulla odio pariatur
        perferendis possimus quod repellat repudiandae tempora tempore temporibus ullam vel voluptatibus voluptatum?
        Animi nemo, optio!
    </div>
    <div>Beatae dolore eius, minima odio quod voluptates. Beatae cumque explicabo facere laboriosam minima molestias rem
        sed, soluta vero! Ad debitis excepturi harum ipsam similique? Dicta ex facere ipsam minima sapiente?
    </div>
    <div>Beatae consectetur deserunt ducimus error, est eveniet illum ipsum, minus molestias odio pariatur ratione
        reiciendis soluta suscipit tenetur totam ullam, veniam! Ea fugit incidunt numquam reprehenderit suscipit tenetur
        unde? Facere.
    </div>
    <div>A accusantium commodi corporis deleniti eveniet fugiat id, itaque laudantium libero neque nesciunt nihil
        numquam obcaecati officiis omnis placeat quam quasi qui recusandae rerum soluta sunt temporibus totam ullam
        vero.
    </div>
    <div>Aliquid animi, beatae consectetur eaque in ipsa magnam maxime nam officia quibusdam sint totam! Aut commodi
        cupiditate dicta, error et impedit ipsam natus numquam officia ratione repellat vero. Molestiae, soluta?
    </div>
    <div>Alias amet architecto, aspernatur consequatur doloremque dolores, dolorum esse itaque magni modi, perspiciatis
        sapiente similique voluptatum? Accusantium fugiat provident unde. Amet cumque error, et fugit id nobis provident
        veritatis voluptates?
    </div>
    <div>Architecto aspernatur corporis culpa, debitis dicta dolor earum, eius enim eveniet fugit inventore ipsam ipsum
        itaque nobis odit perferendis porro quas qui quisquam rerum suscipit tempora totam ut! Nesciunt, saepe?
    </div>
    <div>Ab amet autem consectetur consequatur cum dicta, distinctio dolorum ea esse et illo illum in ipsam, molestias
        nemo neque nesciunt nisi non porro, quia quod ratione reprehenderit tempora vel voluptates!
    </div>
    <div>Alias aperiam architecto aspernatur corporis cum, cumque ducimus eaque eveniet harum impedit ipsa ipsum
        molestias natus nemo nesciunt nisi nostrum numquam quas quod repellat reprehenderit saepe sunt, vel voluptas
        voluptates?
    </div>
    <div>Aspernatur at consequatur distinctio eaque nesciunt nisi officia sit. A assumenda, beatae culpa dolorum eum
        fugiat harum minima molestias repellendus voluptatibus! Architecto corporis, debitis delectus doloribus eius nam
        nihil vitae.
    </div>
    <div>Consectetur consequuntur deleniti dicta ducimus fugiat illum molestiae non quo unde vel! Animi, dolores,
        temporibus. Accusantium expedita iusto, maiores minima molestias nesciunt numquam officiis, recusandae rem
        repellendus saepe, sint tenetur!
    </div>
    <div>Ab alias culpa ducimus enim explicabo fugiat in, ipsam, labore quas quis quo repellendus unde vitae. Aliquid,
        autem debitis earum est ex expedita explicabo incidunt ipsa minus, possimus quam quas.
    </div>
    <div>Culpa cupiditate dignissimos facere incidunt perspiciatis quisquam saepe, voluptas. Amet delectus dolor esse.
        Blanditiis consequuntur corporis enim optio perspiciatis temporibus, totam. Consequatur, ea fugiat incidunt
        praesentium quis repudiandae ut voluptatem!
    </div>
    <div>Adipisci aspernatur aut autem fugiat, in omnis praesentium suscipit unde? Assumenda beatae eligendi hic illum
        iusto laborum magni maiores odit officia officiis optio porro, similique. Eaque exercitationem hic ipsa minus.
    </div>
    <div>Ab consequatur repudiandae sapiente! Aspernatur debitis deleniti enim esse obcaecati quia vitae. Accusamus,
        aliquid cumque eos error maxime necessitatibus obcaecati quae totam voluptate voluptatem. Ad blanditiis dolores
        exercitationem natus numquam.
    </div>
    <div>A accusamus aliquam aut commodi consequuntur eveniet ex impedit iure nam officiis quae quasi quis, reiciendis,
        sapiente, sint sit tempore velit vero! Adipisci aspernatur, autem distinctio minima odit omnis tempora.
    </div>
    <div>Ad aut autem ducimus facilis id ipsam iure minima quaerat quisquam sequi! Excepturi ipsa odit quibusdam
        tenetur! Animi architecto cupiditate expedita explicabo iure nesciunt nobis odio praesentium, unde! Obcaecati,
        quas.
    </div>
    <div>Alias consectetur fugiat illo itaque nesciunt quasi vel. Architecto aspernatur autem culpa et eum expedita
        itaque iusto magnam molestiae numquam omnis placeat quasi quos recusandae, rerum sunt veritatis vero voluptatum!
    </div>
    <div>Alias aliquam architecto, dicta dignissimos esse eum fugit itaque, mollitia officiis, perferendis quisquam quos
        repellendus temporibus? A aperiam aspernatur consequuntur eaque nisi officiis pariatur quod sed. Facilis nemo
        quasi tempora.
    </div>
    <div>Deserunt explicabo id necessitatibus quidem reiciendis. Consequatur debitis dignissimos eaque eligendi in ipsam
        officia recusandae rerum? Eos laudantium natus nostrum. At facilis fuga illum impedit ipsa maiores quae
        repudiandae sapiente.
    </div>
    <div>A, consequatur corporis deleniti distinctio eos, et ex facilis hic in ipsum labore magni maiores maxime placeat
        quia quisquam, quod reiciendis suscipit temporibus ut. Consequuntur earum molestias porro quos tenetur.
    </div>
    <div>Ad asperiores at beatae consequuntur cumque, cupiditate dignissimos ducimus earum enim est fugit harum incidunt
        modi molestias nulla omnis pariatur praesentium quia quo quos ratione, saepe velit voluptatem! Dolore, error.
    </div>
    <div>Accusantium enim eum incidunt ipsam ut? Aliquam dicta dolorem doloribus error et facilis magni nemo possimus,
        quis repellendus sint sunt vel? Aspernatur facere hic illum modi nesciunt perspiciatis praesentium provident!
    </div>
</div>
<script>
    let buttonE=document.getElementById('btn');
    /*鼠标点击事件*/
    buttonE.addEventListener('click',function (){
        alert('哈哈哈，点我了吧~');
    })
    /*鼠标移入事件*/
    let h4E=document.querySelector('h4');
    h4E.addEventListener('mouseover',function (){
        console.log('标题被查看了');
    })
    /*window对象是浏览器内置的全局对象，代表当前浏览器窗口*/
    window.addEventListener('resize',function (){
        //alert('窗口大小resize被改动了');
    })
    window.addEventListener('scroll',function (){
        alert('窗口被滚动了');
    })
</script>
</body>
</html>